<template>
	<view class="upload">
		<view class="com-wrap">
			<view class="cell" v-for="(item, index) in menus" :key="index">
				<view class="cell-left">
					<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
					<view class="cell-text">{{ item.name }}</view>
				</view>
				<view class="iconfont iconmore1"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menus: [{
						name: '我的收藏',
						icon: '/static/user/class-01.png',
						key: 1,
					},
					{
						name: '地址管理',
						icon: '/static/user/class-01.png',
						key: 2,
					},
					{
						name: '尺码对照表',
						icon: '/static/user/class-01.png',
						key: 3,
					},
					{
						name: '帮助中心',
						icon: '/static/user/class-01.png',
						key: 4,
					},
					{
						name: '意见反馈',
						icon: '/static/user/class-01.png',
						key: 5,
					},
					{
						name: '关于我们',
						icon: '/static/user/class-01.png',
						key: 6,
					}

				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload {
		background: #F4F4F4;
		height: 100vh;

		.com-wrap {
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-top: 20rpx;
			border-radius: 25rpx;
			overflow: hidden;

			.cell {
				margin: 10px 5px;
				border-radius: 5px;
				height: 100rpx;
				line-height: 85rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;
				border-bottom: 1px solid #f8f8f8;

				&:active {
					background: #f2f2f2;
				}

				&:last-child {
					border-bottom: none !important;
				}

				.cell-left {
					display: flex;
					padding-left: 15px;

					.cell-icon {
						width: 50rpx;
						height: 50rpx;
						margin-top: 9px;
					}

					.cell-text {
						color: #666;
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}

				.iconfont {
					font-size: 40rpx;
					color: #999;
					padding-right: 10px;
				}
			}
		}
	}
</style>
